<template>
  <div id="detail">
    <detail-nav-bar class="detail-nav"/>
    <scroll class="content" ref="scroll">
      <detail-swiper :top-images="topImages"/>
      <detail-base-info :goods="goods"/>
      <detail-shop-info :shop="shop"/>
      <detail-goods-info :detailInfo="detailInfo" @imageLoad="imageLoad"/>
      <detail-param-info :paramInfo="paramInfo"/>
    </scroll>
  </div>
</template>

<script>
  import DetailNavBar from "./childComps/DetailNavBar";
  import DetailSwiper from "./childComps/DetailSwiper";
  import DetailBaseInfo from "./childComps/DetailBaseInfo";
  import DetailShopInfo from "./childComps/DetailShopInfo";
  import Scroll from "components/common/scroll/Scroll";
  import DetailGoodsInfo from "./childComps/DetailGoodsInfo";
  import DetailParamInfo from "./childComps/DetailParamInfo";

  import {getDetail,Goods,Shop,GoodsParam} from "network/detail";

  export default {
    name: "Detail",
    data(){
      return {
        iid: null,
        topImages: [],
        goods: {},
        shop: {},
        detailInfo: {},
        paramInfo: {}
      }
    },
    components: {
      DetailNavBar,
      DetailSwiper,
      DetailBaseInfo,
      DetailShopInfo,
      Scroll,
      DetailGoodsInfo,
      DetailParamInfo
    },
    created() {
      this.getDetailData()
    },
    methods: {
      getDetailData(){
        //1.得到id
        this.iid=this.$route.params.iid
        // console.log(this.$route.params);
        //  2.拿到数据
        getDetail(this.iid).then(res => {
          console.log(res);
          const data=res.result
          this.topImages=data.itemInfo.topImages
          // console.log(this.topImages.length);

          // 2.获取商品信息
          this.goods = new Goods(res.result.itemInfo,res.result.columns, data.shopInfo.services)

          //获取店铺信息
          this.shop = new Shop(data.shopInfo)

        //  获取商品详情
          this.detailInfo=data.detailInfo

        //  获取商品参数
          this.paramInfo=new GoodsParam(data.itemParams.info,data.itemParams.rule)
        })
      },
      imageLoad(){
        // console.log('---');
        this.$refs.scroll.refresh()
      }
    }
  }
</script>

<style scoped>
  #detail{
    position: relative;
    z-index: 9;
    background: #fff;
    height: 100vh;
  }
  .detail-nav{
    position: relative;
    z-index: 9;
    background: #fff;

  }
  .content{
    height: calc(100% - 44px);
  }
</style>
